<template>
  <div>
    <el-card
      :shadow="shadow"
      :body-style="{ display: 'flex', padding: 0 }"
      class="OrderCard"
    >
      <i class="icon iconfont" :class="icon" :style="{ background: color }" />
      <div>
        <div class="important-font">
          {{ value }} <span class="dw">{{ unit }}</span>
        </div>
        <div class="secondary-font">{{ name }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "IconCard",
  props: {
    shadow: {
      type: String,
      default: "hover",
    },
    icon: {
      type: String,
      default: "icon-ship",
    },
    color: {
      type: String,
      default: "#2ec7c9",
    },
    value: {
      type: [String,Number],
      default: "0",
    },
    unit: {
      type: String,
      default: "单位",
    },
    name: {
      type: String,
      default: "名称",
    },
    headstyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.card-base {
  // margin: 0 0 34px 20px;
  border-radius: 10px;
  // width: 30%;
}
.OrderCard {
  @extend .card-base;
  // border: #dcdfe6 1px solid;

  i {
    width: 30%;
    line-height: 77px;
    font-size: 30px;
    color: #fff;
  }
  div {
    width: 100%;
    // text-align: center;
  }
  .important-font {
    font-weight: 700;
    line-height: 35px;
    font-size: 30px;
    margin-top: 6px;
    .dw {
      font-size: 11px;
      font-weight: 500;
      color: #b5b5b5;
    }
  }
  .secondary-font {
    color: #909399;
  }
}
</style>
